<template>
  <div class="tree">
    <div class="app_title">XXX后台管理</div>
    <ul class="u-content">
      <li class="p_item" v-for="(v, i) in items" :key="i">
        <router-link class="selected-box" :to="v.url" @click="n = i">
          <i class="iconfont" :class="v.icon"></i>{{ v.name }}
          <!-- <b :class="n==i ? 'down':'up'">^</b> -->
        </router-link>
        <!-- <ul class="c_item" v-show="n==i">
                    <li v-for="(sub,j) in v.subItems" :key="j">
                        <a>{{sub.name}}</a>
                    </li>
                </ul> -->
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Vue2ExerciseNav",

  data() {
    return {
      n: -1,
      items: [
        {
          name: "tab切换",
          icon: "icon-yonghu",
          url: "/tab",
        },
        {
          name: "导入案例",
          icon: "icon-yonghu",
          url: "/exportDemo",
        },
        // {
        //     name:'表格',
        //     icon:'icon-baobao',
        //     url:'/table',
        // },
        // {
        //     name:'图表',
        //     icon:'icon-jia',
        //     url:'/chart',
        // },
        {
          name: "父组件到子",
          icon: "icon-jia",
          url: "/toson",
        },
        {
          name: "父操作子",
          icon: "icon-jia",
          url: "/actionson",
        },
        {
          name: "子组件操作父",
          icon: "icon-jia",
          url: "/tofather",
        },
        {
          name: "兄弟组件",
          icon: "icon-jia",
          url: "/brother",
        },
        {
          name: "动态组件",
          icon: "icon-jia",
          url: "/activeCom",
        },
        {
          name: "ulli树组件",
          icon: "icon-jia",
          url: "/tree",
        },
        {
          name: "插槽",
          icon: "icon-jia",
          url: "/slot",
        },
        {
          name: "过滤",
          icon: "icon-jia",
          url: "/filter",
        },
        {
          name: "vuex",
          icon: "icon-jia",
          url: "/vuex",
        },
      ],
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style scoped>
.tree {
  padding: 0px 20px 20px 0px;
  width: 200px;
  height: 100vh;
  background-color: #637cc8;
}
.app_title {
  padding-left: 10px;
  height: 50px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  display: flex;
  align-items: center;
}
.u-content {
  /* background: red; */
}
.p_item {
  /* padding: 10px; */
  height: 30px;
  margin-bottom: 10px;
}
/* .p_item :hover {
        width: 100%;
        border-bottom:2px solid yellow;
        color: #f60;
        background: #8799d6;
    } */

.p_title {
  color: #fff;
  cursor: pointer;
}
.selected-box {
  display: block;
  height: 40px;
  line-height: 40px;
  width: 100%;
  padding: 0px 10px 0px 10px;
}
.active {
  width: 100%;
  background: #8799d6;
  color: #fff;
}
</style>
